<template>
  <div id="app">
    <!--<transition :name="transitionName">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" class="router-view"></router-view>
      </keep-alive>
    </transition>-->
    <!--<transition :name="transitionName">
      <router-view v-if="!$route.meta.keepAlive" class="router-view"></router-view>
    </transition>-->
    <transition :name="transitionName">
      <router-view class="router-view"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route' (to, from) {
      let isBack = this.$router.isBack
      if (isBack) {
        this.transitionName = 'slide-right'
        if (this.$store.state.login && to.path === '/login') {
          this.$router.isBack = false
          this.$router.push({path: '/home'})
        }
      } else {
        this.transitionName = 'slide-left'
      }
      this.$router.isBack = false
    }
  }
}
</script>
<style scoped>
  .router-view {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    /*height: calc(100% - 46px);
    height: -moz-calc(100% - 46px);
    height: -webkit-calc(100% - 46px);*/
  }
  .fade-in-enter, .fade-in-leave-active{
    opacity: 0;
    transition:opacity .5s;
    /*transition: all .3s cubic-bezier(.55,0,.1,1);*/
  }
  /*.slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    transition:opacity .5s;

  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    transition:opacity .5s;
  }*/
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    opacity: 0;
    transition:opacity .5s;
    will-change: transform;
    /*transition: all .3s;*/
    transition: all .3s cubic-bezier(.55,0,.1,1);
    position: absolute;
    width:100%;
    left:0;
  }
  .slide-right-enter {
    opacity: 0;
    transition:opacity .5s;
    transform: translateX(-100%);
  }
  .slide-right-leave-active {
    transform: translateX(100%);
  }
  .slide-left-enter {
    opacity: 0;
    transition:opacity .5s;
    transform: translateX(100%);
  }
  .slide-left-leave-active {
    transform: translateX(-100%);
  }

  .slide-fade-enter, .slide-fade-leave-active {
    opacity: 0;
    transition:opacity .5s;
  }
  .slide-fade-leave-active, .slide-fade-enter {
    opacity: 0;
    transition:opacity .5s;
  }
</style>
